<template>
  <div>
    <!-- 组件传值 父--子
      v-bind 绑定变量  可以简写为: 
    -->
    <Title :title="title"></Title>
    <!-- 1.先提供图表容器 提供宽高 ref当前元素模板引用 类似于id  -->
    <div style="height:150px;" ref="box"></div>
  </div>
</template>
<script setup>
import Title from './Title.vue';
// 引入moment 
import moment from 'moment';
// 引入get请求 
import {get} from '@/utils/request.js'
import { ref, onMounted } from 'vue';
// 引入折线图构造函数  
import { Line } from '@antv/g2plot';

const title = ref('实时温度曲线');//{value:"实时温度曲线"}
// 声明模板引用 
const box = ref(null);//{value:null}
// 声明一个空数组接收后端获取的数据 
let temData = ref([]);
// 声明创建折线图表实例函数 
const loadLine = () => {
  // new Line(图表容器id,{图表配置项})
  const line = new Line(box.value, {
    // 图表数据源 
    data:temData.value,
    xField: 'time',
    yField: 'temperature',
    // x y轴配置项 
    xAxis: {
      // 文本 
      label: {
        // 旋转属性 
        rotate: -45,
        style: {
          fill: 'white'
        }
      }
    },
    yAxis: {
      // 文本 
      label: {
        style: {
          fill: 'white'
        }
      }
    },
    label: {
      style: {
        fill: "white",
        // fontSize:18
      }
    },
    point: {
      size: 5,
      shape: 'diamond',
      style: {
        fill: 'white',
        stroke: '#5B8FF9',
        lineWidth: 2,
      },
    },
    // 给折线图设置动画  
    animation: {
      appear: {
        animation: 'wave-in',
        duration: 3000,//3000ms 3s
      },
    },
    // 设置曲线是否平滑 
    smooth:true,
    tooltip: { showMarkers: false },
    state: {
      active: {
        style: {
          shadowBlur: 4,
          stroke: '#000',
          fill: 'red',
        },
      },
    },
    interactions: [{ type: 'marker-active' }],
  });
  line.render();
};
// 声明获取当天数据函数 
const getTemData = async ()=>{
  let response =await get('/dashboard/pageQueryTodayData',{
    page:1,
    pageSize:60
  });
  response.data.list.forEach((item,index,arr)=>{
    // 第一条数据更改值
    arr[0].temperature = 15.4;
    item.time = moment(item.insert_time).format('HH:mm');
  });
  // 由于数据采集可能一样 每隔10条或者8条取一条 
  let temp = [];
  for(var i=0;i<response.data.list.length;i++){
    // 下标除8取余等于0 
    if(i%8==0){
      // 将符合条件数据添加到temp 
      temp.push(response.data.list[i])
    }
  }
  temData.value = temp;
}
// 生命周期 可以获取dom 节点  标签 ref=box
onMounted(async() => {
  // 调用获取数据函数  先获取数据再给图表使用 
  await getTemData();
  loadLine();//加载折线图 
})

</script>
<style scoped lang="less"></style>